<template>
    <el-autocomplete
      class="admin-search"
      popper-class="my-autocomplete"
      v-model="state.name"
      :fetch-suggestions="querySearch"
      placeholder="输入管理员姓名或账号"
      @select="handleSelect"
  
    >
      <template slot-scope="{ item }">
        <div class="name">{{ item.name }}</div>
        <span class="account">{{ item.account }}</span>
      </template>
    </el-autocomplete>
  </template>
  
  <script>
  import { searchAdmin } from '@/api/user'
  export default {
    name: 'AdminSearcher',
    model: {
      prop: 'value',
      event: 'selected'
    },
    data() {
      return {
        admins: [],
        state: ''
      }
    },
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    watch: {
      value(newVal) {
        this.state = newVal
      }
    },
    methods: {
      querySearch(queryString, cb) {
        searchAdmin(queryString).then(res => {
          const { admins } = res.data
          cb(admins)
        })
      },
      handleSelect(item) {
        this.state = item.name
        this.$emit('selected',item)
        this.$emit('itemId',item.id)
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .admin-search {
    width: 100%;
  }
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;
  
      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .account {
        font-size: 12px;
        color: #b4b4b4;
      }
  
      .highlighted .account {
        color: #ddd;
      }
    }
  }
  </style>
  